<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>电子相册系统</title>
<!-- 源需求文档（本地）: /mnt/data/电子相册系统面向对象需求分析 (1).docx -->
<link rel="stylesheet" href="/css/style.css">
 <!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>

<!-- 个人主页（带侧边导航） -->
<div id="profileView" class="page">
  <div class="profile-wrap">
    <!-- 侧边导航栏 -->
    <nav style="background:var(--card);border-radius:12px;padding:18px;box-shadow:var(--shadow);min-width:180px;display:flex;flex-direction:column;gap:18px;align-items:stretch;">
      <button class="btn ghost" id="navProfile" onclick="showSection('profile')">个人信息</button>
      <button class="btn ghost" id="navAlbums" onclick="showSection('albums')">我的相册</button>
      <button class="btn ghost" id="navFavs" onclick="showSection('favs')">我的收藏</button>
    </nav>
    <!-- 右侧内容区 -->
    <div id="sectionProfile" class="section-content">
      <div class="profile-card">
        <div class="profile-avatar" id="profileAvatar">U</div>
        <div style="font-weight:800" id="profileName">用户名</div>
        <div class="muted" id="profileSince">注册时间</div>
        <div style="width:100%;margin-top:10px">
          
          <button class="btn ghost" style="width:100%" onclick="">修改账户信息</button>
          <button class="btn" style="width:100%;margin-top:8px;background:#f87171" onclick="deleteAccount()">注销账户（删除）</button>
          <div id="deleteConfirmBtns" style="display:none;display:flex;gap:10px;margin-top:8px;">
            <button class="btn" style="background:#f87171;flex:1;" onclick="confirmDelete()">确认</button>
            <button class="btn ghost" style="flex:1;" onclick="cancelDelete()">取消</button>
          </div>
        </div>
      </div>
      <div class="profile-info card" style="margin-top:18px;">
        <h3>账号信息</h3>
        <div id="infoDisplay">
          <div><label>用户名</label><span id="showUsername">演示用户</span></div>
          <div><label>密码</label><span id="showPassword">******</span></div>
          <div><label>手机号</label><span id="showPhone">未填写</span></div>
        </div>
        <div id="infoEdit" style="display:none;">
          <label>用户名</label><input id="editUsername" />
          <label>密码</label><input id="editPassword" type="password" placeholder="不改请输入原密码" />
          <label>手机号</label><input id="editPhone" type="text" placeholder="请输入手机号" />
        </div>
        <button class="btn" id="confirmEditBtn" style="width:100%;margin-top:10px;display:none;" onclick="confirmEdit()">确认修改</button>
      </div>
      <div class="card" style="margin-top:12px">
        <h3>统计</h3>
        <div style="display:flex;gap:12px;margin-top:8px">
          <div><strong id="statAlbums">0</strong><div class="muted">相册</div></div>
          <div><strong id="statLikes">0</strong><div class="muted">获赞</div></div>
          <div><strong id="statFavs">0</strong><div class="muted">收藏</div></div>
        </div>
      </div>
    </div>
    <div id="sectionAlbums" class="section-content" style="display:none;">
      <div class="card"><h3>我的相册</h3><div id="myAlbums">（此处可加载我的相册列表）</div></div>
    </div>
    <div id="sectionFavs" class="section-content" style="display:none;">
      <div class="card"><h3>我的收藏</h3><div id="myFavs">（此处可加载我的收藏列表）</div></div>
    </div>
  </div>
</div>
<button class="btn ghost"  style="position:fixed;top:24px;right:32px;z-index:1000; "onclick="back()">返回主页面</button>
<script>
// 我的收藏渲染逻辑
let myFavs = [];

function loadMyFavs() {
  fetch('/getcollectedalbums')
    .then(res => res.json())
    .then(albums => {
      myFavs = albums;
      renderMyFavs();
    });
}

function renderMyFavs() {
  const grid = document.getElementById('myFavs');
  grid.innerHTML = '';
  if (!myFavs.length) {
    grid.innerHTML = '<div class="muted">暂无收藏</div>';
    return;
  }
  myFavs.forEach(album => {
    const card = document.createElement('div');
    card.className = 'album-card';
    card.style.cursor = 'pointer';
    card.style.width = '180px';
    card.style.display = 'inline-block';
    card.style.margin = '8px';
    card.onclick = () => window.location.href = `/album/${album.albumId}`;
    let coverHtml = '';
    if (album.coverUrl) {
      coverHtml = `<img src="${album.coverUrl}" alt="封面" style="height:110px;object-fit:cover;">`;
    } else {
      coverHtml = `<div style="height:110px;display:flex;align-items:center;justify-content:center;background:#eee;font-size:18px;color:#888;font-weight:700;">${album.title}</div>`;
    }
    card.innerHTML = `
      ${coverHtml}
      <div class="meta" style="padding:8px;">
        <div class="title" style="font-size:15px;">${album.title}</div>
        <div class="info" style="font-size:12px;">作者：${album.author} | 类别：${album.category}</div>
      </div>
    `;
    grid.appendChild(card);
  });
}
// 我的相册渲染逻辑
let myAlbums = [];

function loadMyAlbums() {
  fetch('/getmyalbumsbrief')
    .then(res => res.json())
    .then(albums => {
      myAlbums = albums;
      renderMyAlbums();
    });
}

function renderMyAlbums() {
  const grid = document.getElementById('myAlbums');
  grid.innerHTML = '';
  if (!myAlbums.length) {
    grid.innerHTML = '<div class="muted">暂无相册</div>';
    return;
  }
  myAlbums.forEach(album => {
    const card = document.createElement('div');
    card.className = 'album-card';
    card.style.cursor = 'pointer';
    card.style.width = '180px';
    card.style.display = 'inline-block';
    card.style.margin = '8px';
    card.onclick = () => window.location.href = `/album/${album.albumId}`;
    let coverHtml = '';
    if (album.coverUrl) {
      coverHtml = `<img src="${album.coverUrl}" alt="封面" style="height:110px;object-fit:cover;">`;
    } else {
      coverHtml = `<div style="height:110px;display:flex;align-items:center;justify-content:center;background:#eee;font-size:18px;color:#888;font-weight:700;">${album.title}</div>`;
    }
    card.innerHTML = `
      ${coverHtml}
      <div class="meta" style="padding:8px;">
        <div class="title" style="font-size:15px;">${album.title}</div>
        <div class="info" style="font-size:12px;">作者：${album.author} | 类别：${album.category}</div>
      </div>
    `;
    grid.appendChild(card);
  });
}

// 切换到“我的相册”时自动加载
function showSection(section) {
  document.getElementById('sectionProfile').style.display = (section === 'profile') ? '' : 'none';
  document.getElementById('sectionAlbums').style.display = (section === 'albums') ? '' : 'none';
  document.getElementById('sectionFavs').style.display = (section === 'favs') ? '' : 'none';
  document.getElementById('navProfile').classList.toggle('active', section === 'profile');
  document.getElementById('navAlbums').classList.toggle('active', section === 'albums');
  document.getElementById('navFavs').classList.toggle('active', section === 'favs');
  if (section === 'albums') {
    loadMyAlbums();
  }
  if (section === 'favs') {
    loadMyFavs();
  }
}


// 页面加载默认显示个人信息
window.onload = function() {
  showSection('profile');
  document.getElementById('confirmEditBtn').style.display = 'none';
  document.getElementById('infoEdit').style.display = 'none';
  document.getElementById('infoDisplay').style.display = 'block';
  document.getElementById('deleteConfirmBtns').style.display = 'none';
  loadProfileInfo();
  loadcounts();
}

function deleteAccount() {
  document.getElementById('deleteConfirmBtns').style.display = 'flex';
  event.target.style.display = 'none';
}

function cancelDelete() {
  document.getElementById('deleteConfirmBtns').style.display = 'none';
  document.querySelector('button[onclick="deleteAccount()"]').style.display = 'block';
}

function confirmDelete() {
  //删除账户的逻辑
  fetch('/canceluser')
    .then(() => {
      alert('账户已注销');
    });
  window.location.href = '/';
}


document.querySelector('button[onclick=""]').onclick = function() {
  document.getElementById('infoDisplay').style.display = 'none';
  document.getElementById('infoEdit').style.display = 'block';
  document.getElementById('confirmEditBtn').style.display = 'block';
}

function confirmEdit() {
  // 这里写提交修改的逻辑
  const password = document.getElementById('editPassword').value;
  if (password === '') {
    alert('密码不能为空，请输入原密码或新密码');
    return;
  }
  fetch('/updateuserinfo', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: document.getElementById('editUsername').value,
      password: document.getElementById('editPassword').value,
      phone: document.getElementById('editPhone').value
    })
  });
  alert('修改已提交！');
  document.getElementById('infoDisplay').style.display = 'block';
  document.getElementById('infoEdit').style.display = 'none';
  document.getElementById('confirmEditBtn').style.display = 'none';
  setTimeout(() => {
    loadProfileInfo();
  }, 500);
}
function loadProfileInfo() {
  fetch('/getuserinfo')
    .then(res => res.json())
    .then(data => {
      if( !data.username ) {
        alert('未登录或登录已过期，请重新登录。');
        window.location.href = '/';
        return;
      }
      document.getElementById('profileName').innerText = "ID: " + data.userid;
      document.getElementById('showUsername').innerText = data.username;
      document.getElementById('showPhone').innerText = data.phone ? data.phone : '未填写';
      // 编辑区预填充
      document.getElementById('editUsername').value = data.username || '';
      document.getElementById('editPhone').value = data.phone || '';
      // 这里可以添加更多信息的加载
    });
}
function loadcounts() {
  fetch('/getuserstats')
    .then(res => res.json())
    .then(data => {
      document.getElementById('statAlbums').innerText = data.albumCount;
      document.getElementById('statLikes').innerText = data.likeCount;
      document.getElementById('statFavs').innerText = data.favCount;
    });
    console.log("加载统计数据");
}

function back() {
  window.location.href = '/main';
}
</script>
</body>
</html>
